<template>
	<view class="record" :style="{paddingTop: paddingHeight + 'px'}">
		<nav-bar title="运动记录"></nav-bar>
		<view class="container">
			<view class="date_h">
				<u-image width="48rpx" height="48rpx" :showMenuByLongpress="false" @click="$u.throttle(reduceTap, 1000)"
					src="http://oss.antaimedical.com/images/static/2024/07/6690f721eb14d0f049f44d4fjy4xzrYAJBuG7f1f413ee9db0c4a498e3ad8017621b0.png"
					:lazy-load="true"></u-image>
				<view class="date_m" @click="showCalendar = true">
					<text>{{ currentSearchTime }}</text>
					<text class="iconfont icon-ln_sanjiaoxia"></text>
				</view>
				<u-image width="48rpx" height="48rpx" :showMenuByLongpress="false" @click="$u.throttle(plusTap, 1000)"
					src="http://oss.antaimedical.com/images/static/2024/07/6690f735eb14d0f049f44d50JLzReaiikJTQc2681661f1bb789352b3fc054979635a.png"
					:lazy-load="true"></u-image>
			</view>
			<view class="cell" v-for="(item,index) in daysList" :key="index" @click="goDetails(item.sportDate)">
				<view class="c_l">
					{{ item.sportDate.replaceAll('-','/') }}
				</view>
				<view class="c_r">
					<text class="n-d">
						{{ item.kcal }}
					</text>
					<text class="unit">
						kcal
					</text>
				</view>
			</view>
		</view>
		<my-calendar :monthNum="24" :defaultDate="defaultDate" :maxDate="maxDate" @confirm="selectDate"
			:minDate="minDate" :show="showCalendar" color="#545DDE" closeOnClickOverlay
			@close="showCalendar = false"></my-calendar>
	</view>
</template>

<script>
	import {
		findSportDataDayPage
	} from '@/api/index.js'
import myCalendar from '@/components/myCalendar/myCalendar.vue';
	const dayjs = require('@/utils/dayjs.min.js');
	export default {
        components: {
            myCalendar,
        },
		data() {
			return {
				paddingHeight: uni.getStorageSync('navbarHeight'),
				userId: uni.getStorageSync("userId"),
				daysList: [],
				currentSearchTime: '',
				defaultDate: [],
				maxDate: undefined,
				minDate: undefined,
				showCalendar: false, // 日历控件显示
			}
		},
		onLoad() {
			this.maxDate = dayjs().format('YYYY-MM-DD');
			this.minDate = dayjs(dayjs(this.maxDate).subtract(365, 'day')).format('YYYY-MM-DD')
			this.currentSearchTime = dayjs().format('YYYY/MM')
			this.defaultDate[0] = this.maxDate
		},
		onShow() {
			this.fetchData()
		},
		methods: {
			async fetchData() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					page: 1,
					size: 32,
					time: this.defaultDate[0],
					userId: this.userId
				}
				try {
					const res = await findSportDataDayPage(params)
					if (res.code == 200) {
						this.daysList = res.data.list
					}
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			// 选择日期
			selectDate(e) {
				this.defaultDate[0] = e[0]
				this.currentSearchTime = dayjs(e[0]).format('YYYY/MM')
				this.fetchData()
				this.showCalendar = false
			},
			// 上一个选项
			reduceTap() {
				let pre = dayjs(dayjs(this.defaultDate[0]).subtract(1, 'month')).format('YYYY/MM/DD')
				let min = dayjs(this.minDate).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = dayjs(pre).format('YYYY/MM')
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			},
			// 下一个选项
			plusTap() {
				let next = dayjs(dayjs(this.defaultDate[0]).add(1, 'month')).format('YYYY/MM/DD')
				let max = dayjs(this.maxDate).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = dayjs(next).format('YYYY/MM')
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			},
			goDetails(date) {
				uni.navigateTo({
					url: `/pagesA/health/campaign/record/details?date=${date}`
				})
			},
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #FAFAFA;
		min-height: 100%;
	}
</style>
<style lang="scss" scoped>
	.record {
		.container {
			padding: 0 48rpx 48rpx;

			.date_h {
				padding: 48rpx 0; 

				.date_m {
					background-color: #545DDE;
					color: #fff;
					font-size: 24rpx;
					.icon-ln_sanjiaoxia {
						color: #fff;
					}
				}
			}

			.cell {
				width: 100%;
				height: 118rpx;
				margin-bottom: 16rpx;
				padding: 0 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 32rpx;
				color: #666666;
				font-size: 28rpx;

				.c_r {
					font-size: 32rpx;
					display: flex;
					align-items: flex-end;

					.n-d {
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						line-height: 34rpx;
					}

					.unit {
						font-size: 20rpx;
						padding-left: 8rpx;
					}
				}
			}
		}
	}
</style>